:host {
  --header-cell-width: var(--bl-table-header-cell-width, auto);
  --header-cell-min-width: var(--bl-table-header-cell-min-width, auto);

  display: table-cell;
  border: 1px solid var(--bl-color-neutral-lighter);
  background-color: var(--bl-color-neutral-lightest);
  padding: var(--bl-size-m);
  font: var(--bl-font-title-3-medium);
  color: var(--bl-color-neutral-darker);
  box-sizing: border-box;
  vertical-align: middle;
  white-space: normal;
  width: var(--header-cell-width);
  min-width: var(--header-cell-min-width);
  background-clip: padding-box;
}

.table-header-cell {
  display: flex;
  align-items: center;
}

.table-header-cell.shadow-right::before {
  content: "";
  position: absolute;
  inset-inline-end: -1px;
  top: 0;
  width: 16px;
  height: 100%;
  z-index: -1;
  border-inline-end: 1px solid var(--bl-color-neutral-lighter);
  box-shadow: calc(8px * var(--bl-text-x-direction)) 0 16px 0 rgb(39 49 66 / 10%);
}

.table-header-cell.shadow-left::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 0;
  width: 16px;
  height: 100%;
  z-index: -1;
  border-inline-start: 1px solid var(--bl-color-neutral-lighter);
  box-shadow: calc(-8px * var(--bl-text-x-direction)) 0 16px 0 rgb(39 49 66 / 10%);
}

bl-checkbox {
  margin-inline-end: var(--bl-size-m);
}

.sort-icons-wrapper {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bl-size-4xs);
  cursor: pointer;
}

.sort-icons-wrapper:focus-visible {
  outline: 2px solid var(--bl-color-primary);
  outline-offset: 2px;
  border-radius: var(--bl-border-radius-xs);
}

.sort-icons-wrapper bl-icon {
  font-size: var(--bl-font-size-m);
  color: var(--bl-color-neutral-darker);
}
